<template>
  <div class="service">
    <!-- 1 banner 装修计算器 -->
    <el-row class="service-banner">
      <el-col :span="18" :offset="3">
        <el-card class="banner-estimate">
          <h3 class="ta-center">装修要花多少钱？10秒在线估算</h3>
          <p class="p1 ta-center">给你专业、公正、透明的装修报价</p>
          <el-form ref="ruleFormRef" size="large" :model="ruleForm" :rules="rules">
            <el-form-item prop="area">
              <el-input v-model="ruleForm.area" placeholder="输入房屋面积">
                <template #append> m² </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="phone">
              <el-input v-model="ruleForm.phone" placeholder="输入您的手机号"></el-input>
            </el-form-item>
            <el-form-item size="small">
              <el-checkbox v-model="ruleForm.checked">我已阅读并接受</el-checkbox
              ><el-link :underline="false">《隐私政策》</el-link
              ><el-link :underline="false">《服务条款》</el-link>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 100%" type="primary" @click="submitForm(ruleFormRef)"
                >领取设计方案和报价</el-button
              >
            </el-form-item>
          </el-form>
          <span>报价后将会有装修顾问致电为您解读报价</span>
        </el-card>
      </el-col>
    </el-row>
    <!-- 2 video 视频 一分钟了解装修 -->
    <el-row class="service-video">
      <el-col :span="10" :offset="4" class="service-video-img"> </el-col>
      <el-col :span="6" class="display-flex ai-center jc-center fd-column service-video-text">
        <h3>一分钟了解</h3>
        <h3>先装修后支付</h3>
        <p>全新装修资金支付方式</p>
      </el-col>
    </el-row>
    <!-- 3 payment 付款方式  -->
    <el-row class="service-payment">
      <el-col :span="22" :offset="1">
        <div class="service-common">
          <h2 class="service-common-title">
            <span class="service-common-title-before"></span>
            面对传统装修行业付款方式
            <span class="service-common-title-after"></span>
          </h2>
          <span class="service-common-description"></span>
          <div class="service-common-content">
            <img :src="payment" style="display: block; width: 100%" />
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 4 first 优势1   -->
    <el-row class="service-first">
      <el-col :span="22" :offset="1">
        <div class="service-common">
          <h2 class="service-common-title">
            <span class="service-common-title-before"></span>
            优势一 先装修后支付，业主更有话语权
            <span class="service-common-title-after"></span>
          </h2>
          <span class="service-common-description">先装后付，不怕装修公司跑路</span>
          <!-- <div class="service-common-content">
            <img :src="flowchart3" style="display: block;width: 100%;"  />
          </div> -->
        </div>
        <div class="service-first-content">
          <el-descriptions
            style="width: 80%"
            size="large"
            title=""
            direction="vertical"
            :column="3"
            border
          >
            <el-descriptions-item
              label="装修公司收款节点"
              label-align="center"
              align="center"
              label-class-name="my-label"
              class-name="my-content"
            >
              <el-descriptions
                title=""
                label-class-name="my-item-label"
                class-name="my-item-content"
                direction="vertical"
                :column="1"
                border
              >
                <el-descriptions-item
                  label-class-name="my-item-label"
                  class-name="my-item-content"
                  label="签订合同"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
                <el-descriptions-item
                  label-class-name="my-item-label"
                  class-name="my-item-content"
                  label="装修开工"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
                <el-descriptions-item
                  label-class-name="my-item-label"
                  class-name="my-item-content"
                  label="水电完工"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
                <el-descriptions-item
                  label-class-name="my-item-label"
                  class-name="my-item-content"
                  label="泥工完工"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
                <el-descriptions-item
                  label-class-name="my-item-label"
                  class-name="my-item-content"
                  label="油漆完工"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
                <el-descriptions-item
                  label-class-name="my-item-label"
                  class-name="my-item-content"
                  label="装修竣工"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
              </el-descriptions>
            </el-descriptions-item>
            <el-descriptions-item
              label="先装修后支付"
              label-align="center"
              align="center"
              label-class-name="my-label"
              class-name="my-content"
            >
              <el-descriptions
                title=""
                label-class-name="my-item-label1"
                class-name="my-item-content1"
                direction="vertical"
                :column="1"
                border
              >
                <el-descriptions-item
                  label-class-name="my-item-label1"
                  class-name="my-item-content1"
                  label="只要交装修押金"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
                <el-descriptions-item
                  label-class-name="my-item-label1"
                  class-name="my-item-content1"
                  label="支付开工款 20%"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
                <el-descriptions-item
                  label-class-name="my-item-label1"
                  class-name="my-item-content1"
                  label="支付水电阶段款 20%"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
                <el-descriptions-item
                  label-class-name="my-item-label1"
                  class-name="my-item-content1"
                  label="支付泥工阶段款 20%"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
                <el-descriptions-item
                  label-class-name="my-item-label1"
                  class-name="my-item-content1"
                  label="支付油漆阶段款 20%"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
                <el-descriptions-item
                  label-class-name="my-item-label1"
                  class-name="my-item-content1"
                  label="支付尾款 20%"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
              </el-descriptions>
            </el-descriptions-item>
            <el-descriptions-item
              label="传统付款方式"
              label-align="center"
              align="center"
              label-class-name="my-label"
              class-name="my-content"
            >
              <el-descriptions
                title=""
                label-class-name="my-item-label1"
                class-name="my-item-content1"
                direction="vertical"
                :column="1"
                border
              >
                <el-descriptions-item
                  label-class-name="my-item-label1"
                  class-name="my-item-content1"
                  label="支付约55%"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
                <el-descriptions-item
                  label-class-name="my-item-label1"
                  class-name="my-item-content1"
                  label="未开工已支付一半装修款"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
                <el-descriptions-item
                  label-class-name="my-item-label1"
                  class-name="my-item-content1"
                  label="支付约20%"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
                <el-descriptions-item
                  label-class-name="my-item-label1"
                  class-name="my-item-content1"
                  label="支付约20%"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
                <el-descriptions-item
                  label-class-name="my-item-label1"
                  class-name="my-item-content1"
                  label="工地未完工已支付大部分装修款"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
                <el-descriptions-item
                  label-class-name="my-item-label1"
                  class-name="my-item-content1"
                  label="支付约5%"
                  label-align="center"
                  align="center"
                ></el-descriptions-item>
              </el-descriptions>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div>
          <div class="service-first-desc">
            *以上节点付款比例及验收适用于整体家装，具体付款比例详见签订的土巴免装修保障服务协议
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 5 second 优势二  -->
    <el-row class="service-second">
      <el-col :span="22" :offset="1">
        <div class="service-common">
          <h2 class="service-common-title">
            <span class="service-common-title-before"></span>
            <span>优势二 尾款托管最长30天，装修过程不被动</span>
            <span class="service-common-title-after"></span>
          </h2>
          <span class="service-common-description"></span>
        </div>
        <el-row :gutter="20" class="service-second-content">
          <el-col
            v-for="(item, k) in decorationData"
            :key="k"
            :xs="24"
            :sm="12"
            :md="12"
            :lg="8"
            :xl="8"
            style="margin-bottom: 20px"
          >
            <el-card shadow="always" :body-style="{ padding: '0px' }">
              <img :src="item.image" class="image" style="width: 100%" />
              <div class="content-box ta-left">
                <div class="content-title">
                  {{ item.title }}
                </div>
                <div v-for="_item in item.description" class="content-description">
                  {{ _item.desc }}
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 6 third 先装后付  -->
    <el-row class="service-third">
      <el-col :span="22" :offset="1">
        <div class="service-common">
          <h2 class="service-common-title">
            <span class="service-common-title-before"></span>
            <span>先装修后支付服务流程</span>
            <span class="service-common-title-after"></span>
          </h2>
          <span class="service-common-description"> 九五装饰为业主提供相应保障服务的承诺 </span>
        </div>
      </el-col>
      <el-col :span="22" :offset="1" class="service-third-content">
        <img :src="flowchart2" style="display: block; width: 100%" />
      </el-col>
    </el-row>
    <!-- 7 fourth 更多服务  -->
    <el-row class="service-fourth service-bgfigure">
      <el-col :span="22" :offset="1">
        <div class="service-common">
          <h2 class="service-common-title">
            <span class="service-common-title-before"></span>
            <span>更多服务</span>
            <span class="service-common-title-after"></span>
          </h2>
          <span class="service-common-description"> 装企为土巴兔业主提供相应保障服务的承诺 </span>
          <span class="service-common-description">
            点亮相应标签即表示，装企自愿为土巴兔用户提供该保障服务。
          </span>
        </div>
        <el-row :gutter="30" class="service-fourth-content">
          <el-col :span="4">
            <el-card shadow="always" :body-style="{ padding: '0px' }" class="cursor-pointer">
              <div class="content-box">
                <div class="content-title">装修分期</div>
                <div class="content-description">按月付款，轻松住新家</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card shadow="always" :body-style="{ padding: '0px' }" class="cursor-pointer">
              <div class="content-box">
                <div class="content-title">全屋定制</div>
                <div class="content-description">扩展空间享受生活</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="service-fourth-content">
          <el-col :span="12">
            <el-button size="large" type="success">立即预约</el-button>
          </el-col>
          <el-col :span="24"><span class="content-desc">具体内容以标签说明为准</span></el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 8 problem 常见问题  -->
    <el-row class="service-problem">
      <el-col :span="22" :offset="1">
        <div class="service-common">
          <h2 class="service-common-title">
            <span class="service-common-title-before"></span>
            <span>常见问题</span>
            <span class="service-common-title-after"></span>
          </h2>
          <span class="service-common-description"></span>
        </div>
        <el-row :gutter="20" class="service-problem-content">
          <el-col :span="12" :offset="6">
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item title="问：为什么将装修款托管？" name="1">
                <div>
                  <p>装修款进行托管而不是直接打给装修公司，具体有四个好处：</p>
                  <p>第一:资金安全，装修款由第三方全国性银行专项管理，没有线下交易被卷款的风险；</p>
                  <p>第二:干完一部分活才付一部分钱，装修更有话语权；</p>
                  <p>第三:一旦装修期间业主与装修公司争议不下，业主可驳回装企的返款申请；</p>
                  <p>第四:20%装修尾款，最晚可在竣工30天后支付，足够您仔细检查。</p>
                </div>
              </el-collapse-item>
              <el-collapse-item title="问：什么时候将装修款项托管？" name="2">
                <div>
                  Operation feedback: enable the users to clearly perceive their operations by style
                  updates and interactive effects;
                </div>
              </el-collapse-item>
              <el-collapse-item title="问：托管的装修款什么时候支付给装修公司？" name="3">
                <div>Simplify the process: keep operating process simple and intuitive;</div>
                <div>
                  Definite and clear: enunciate your intentions clearly so that the users can
                  quickly understand and make decisions;
                </div>
                <div>
                  Easy to identify: the interface should be straightforward, which helps the users
                  to identify and frees them from memorizing and recalling.
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 9 about 关于九五  -->
    <el-row class="service-about">
      <el-col :span="24">
        <div class="service-common">
          <h2 class="service-common-title">
            <span class="service-common-title-before"></span>
            <span>联系我们</span>
            <span class="service-common-title-after"></span>
          </h2>
          <span class="service-common-description">4年累计登记业主需求10万多</span>
        </div>
        <el-row>
          <el-col :span="16" :offset="4" class="padding-20">
            <el-descriptions class="margin-20" :column="1" :size="'default'" border>
              <el-descriptions-item label="公司地址" label-align="center" align="left">
                无锡市新吴区纺城大道288号新世界国际纺织服装城(纺织)B24-19.
              </el-descriptions-item>
              <el-descriptions-item label="电话" label-align="center" align="left">
                18601560107
              </el-descriptions-item>
              <el-descriptions-item label="服务区域" label-align="center" align="left">
                无锡市
              </el-descriptions-item>
              <el-descriptions-item label="服务专长" label-align="center" align="left">
                普通住宅,别墅,展会空间,会所,网吧
              </el-descriptions-item>
              <el-descriptions-item label="承接价位" label-align="center" align="left">
                3万以上
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="24">
            <div class="service-about-map">
              <baidu-map class="map" :center="{ lng: 120.41479, lat: 31.576762 }" :zoom="16">
                <bm-marker
                  :position="{ lng: 120.41479, lat: 31.576762 }"
                  :dragging="false"
                  animation="BMAP_ANIMATION_BOUNCE"
                  @click="infoWindowOpen"
                >
                  <bm-label
                    content="无锡九五装饰"
                    :label-style="{ color: '#f44336', fontSize: '12px', padding: '5px' }"
                    :offset="{ width: -30, height: 25 }"
                  />
                  <bm-info-window
                    :show="showBmInfo"
                    style="padding: 5px !important"
                    @close="infoWindowClose"
                    @open="infoWindowOpen"
                    ><h4>无锡九五装饰设计工程有限公司</h4>
                    <p>地址：无锡市新吴区纺城大道288号新世界国际纺织服装城(纺织)B24-19</p>
                    <p>电话：18601560107</p>
                  </bm-info-window>
                </bm-marker>
              </baidu-map>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { fa } from 'element-plus/es/locale'

// -------------- 装修计算器 start --------------
// 装修计算器校验规则
// 自定义校验规则
const validateArea = (rule: any, value: any, callback: any) => {
  console.log('value', value)
  if (value === '') {
    callback(new Error('房屋面积不能为空'))
  } else if (value !== '' && value <= '5') {
    callback(new Error('房屋面积必须大于5'))
  } else {
    console.log('value======', value)
    if (ruleForm.area !== '') {
      if (!ruleFormRef.value) {
        return
      }
      ruleFormRef.value.validateField('area', () => null)
    }
    callback()
  }
}
// 装修计算器-参数
interface RuleForm {
  area: string
  phone: string
  checked: Boolean
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  area: '',
  phone: '',
  checked: false
})
const rules = reactive<FormRules<RuleForm>>({
  area: [{ validator: validateArea, trigger: 'blur' }],
  phone: [{ required: true, message: '手机号必填', trigger: 'blur' }]
})

// 装修计算器-方法
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

// -------------- 装修计算器 end --------------

// 3 payment 付款方式
const payment = ref(new URL(`/src/assets/images/${'payment'}.jpg`, import.meta.url).href)

// 5 second 优势二
const decorationData = reactive([
  {
    id: '1',
    title: '传统付款方式',
    description: [
      {
        desc: '泥工完工前，已收取您大部分装修款，仅保留很少部分尾款'
      },
      {
        desc: '发现问题，装修公司处理迟缓'
      }
    ],
    image: new URL(`/src/assets/images/${'decorating1'}.jpg`, import.meta.url).href
  },
  {
    id: '1',
    title: '九五装饰先装修后支付',
    description: [
      {
        desc: '20%装修尾款，最晚可在竣工30天后支付'
      },
      {
        desc: '发现问题，装修公司积极解决'
      }
    ],
    image: new URL(`/src/assets/images/${'decorating2'}.jpg`, import.meta.url).href
  }
])

// 6 third 先装后付
const flowchart2 = ref(new URL(`/src/assets/images/${'flowchart2'}.jpg`, import.meta.url).href)

// 8 常见问题
const activeName = ref('1')

// 9 地图
const showBmInfo = ref(false)

const infoWindowClose = () => {
  showBmInfo.value = false
}
const infoWindowOpen = () => {
  showBmInfo.value = true
}
</script>

<style lang="scss" scoped>
:deep(.my-label) {
  background: #00ac8a !important;
  color: #fff !important;
  padding: 20px !important;
  font-size: 20px !important;
}
:deep(.my-content) {
  background: blue;
  padding: 0px !important;
}
:deep(.my-item-label) {
  background-color: #f5fffe !important;
  padding: 10px !important;
  font-size: 18px !important;
}
:deep(.my-item-content) {
  background-color: aqua !important;
  padding: 0px !important;
}
:deep(.my-item-label1) {
  background-color: #fff !important;
  font-weight: 100 !important;
  padding: 10px !important;
  font-size: 18px !important;
}
:deep(.my-item-content1) {
  background-color: #ac0000 !important;
  padding: 0px !important;
}
.service {
  // 常用标题
  .service-common {
    display: flex;
    flex-direction: column;
    align-items: center;
    .service-common-top {
      display: block;
      padding: 4px 0;
      font-size: 14px;
      color: #999 !important;
    }
    // 常用标题
    .service-common-title {
      height: 45px;
      line-height: 45px;
      font-size: 34px;
      font-weight: 500;
      margin: 5px;
      a {
        color: #333;
        text-decoration: none;
      }
      .service-common-title-after,
      .service-common-title-before {
        display: inline-block;
        width: 57px;
        height: 1px;
        margin: 0 26px;
        background-color: #d8d8d8;
        vertical-align: middle;
      }
    }
    // 常用描述
    .service-common-description {
      display: block;
      padding: 4px 0;
      font-size: 22px;
      color: #999 !important;
    }
  }
  /**
  * 1 banner 装修计算器
  * 2 video 视频 一分钟了解装修
  * 3 payment 付款方式
  * 4 first 优势1
  * 5 second 优势2
  * 6 third 优势3
  * 7 fourth 更多服务
  * 8 problem 常见问题
  * 9 about 关于九五
  **/
  // 1 banner 装修计算器
  .service-banner {
    height: 430px;
    padding: 30px;
    background-image: url('@/assets/images/index_data_bg.jpg');
    background-size: cover;
    background-position: center;
    .banner-estimate {
      width: 370px;
      height: 370px;
      .el-card__header {
        border: none !important;
      }
      h3 {
        margin-bottom: 0px;
        padding: 0px;
        text-align: center;
        font-weight: bold;
        color: #1a1c1a;
      }
      .p1 {
        font-size: 14px;
        color: #ef7a26;
        margin-top: 3px;
      }
      span {
        display: block;
        padding: 4px 0;
        font-size: 12px;
        text-align: center;
        color: #999 !important;
      }
    }
  }
  .service-payment,
  .service-second,
  .service-fourth,
  .service-about {
    background-color: #f7f8f9;
  }
  .service-video,
  .service-first,
  .service-third,
  .service-problem {
    background-color: #fff;
  }
  //
  .service-video,
  .service-payment,
  .service-first,
  .service-second,
  .service-third,
  .service-fourth,
  .service-problem {
    padding: 50px;
    // 2. video 视频 一分钟了解装修
    .service-video-img {
      background-image: url('@/assets/images/video_bg.jpg');
      background-size: cover;
      background-position: center;
    }
    .service-video-text {
      height: 420px;
      background: #f7f8f9;
      overflow: hidden;
      h3 {
        margin: 0px;
      }
      p {
        margin: 5px;
      }
    }
    // 4. first 优势1
    .service-first-content,
    .service-second-content,
    .service-fourth-content {
      padding: 20px;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      text-align: center;
      .content-box {
        padding: 10px;
        .content-title {
          margin-left: 20px;
          font-size: 20px;
          color: #333;
          font-weight: 700;
        }
        .content-description {
          margin-top: 3px;
          margin-left: 20px;
          font-size: 14px;
          color: #666;
        }
      }
      .content-desc {
        display: block;
        padding: 4px 0;
        font-size: 12px;
        color: #999 !important;
      }
    }
    .service-first-desc {
      display: block;
      padding: 4px 0;
      font-size: 12px;
      text-align: center;
      color: #999 !important;
    }
    // 6 third 先装后付
    .service-third-content {
      padding: 30px;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
  }
  // 9 联系我们
  .service-about {
    padding-top: 50px;
    .service-about-map {
      // margin: 30px 0px;
      width: 100%;
      height: 500px;
      .map {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
